<!-- 评价商品 -->
<template>
	<view class="content page">
		<status-bar title='提交评论'></status-bar>
		<view v-if='pageData'>
			<!-- 商品信息 -->
			<view class="commetItem" v-for="(item1,index1) in pageData.goodsData" :key='index1'>
				<view class="flex-box align-center goodsBox">
					<image class="goodsImg radius" @error="item1.goods_img =''" :src="item1.goods_img?$imgUrls(item1.goods_img): staticUrl+'/images/imageLoading.png'"
					 mode="aspectFill"></image>
					<view class="txt flex">
						<view class="thmeTxt lines">
							{{item1.goods_name}}
						</view>
						<view class="myPrice">
							{{item1.price}}
						</view>
						<view class="specsBox" v-if='item1.operation_text'>
							<text class="txt">{{item1.operation_text}}</text>
						</view>
						<view class="specsBox" v-else>
							<text class="goods_num">x {{item1.goods_num}}</text>
						</view>
					</view>
				</view>
				<!-- 商品相符 -->
				<view class="flex-box similar-box align-center">
					<text>{{ goodsName }}相符</text>
					<view class="flex-box align-center face-box flex" v-if='CommentConfig.mode == 1'>
						<view>
							<view class="img-box" @click="comments[index1].star = 5">
								<text class="iconfont icon-Fill1" :class="{ thmeColor: comments[index1].star == 5 }" :style="{'--color': color}"></text>
								<image :src="staticUrl+'/images/jh_up/icon-2003.png'" class="icon-face"></image>
							</view>
							<view class="txt" :class="{show: comments[index1].star == 5}">超赞</view>
						</view>
						<view>
							<view class="img-box" @click="comments[index1].star = 3">
								<text class="iconfont icon-Fill1" :class="{ thmeColor: comments[index1].star == 3 }" :style="{'--color': color}"></text>
								<image :src="staticUrl+'/images/jh_up/icon-2001.png'" class="icon-face"></image>
							</view>
							<view class="txt" :class="{show: comments[index1].star == 3}">良好</view>
						</view>
						<view>
							<view class="img-box" @click="comments[index1].star = 1">
								<text class="iconfont icon-Fill1" :class="{ thmeColor: comments[index1].star == 1 }" :style="{'--color': color}"></text>
								<image :src="staticUrl+'/images/jh_up/icon-2002.png'" class="icon-face"></image>
							</view>
							<view class="txt" :class="{show: comments[index1].star == 1}">一般</view>
						</view>
					</view>
					<view class="flex-box align-center starBox" v-if='CommentConfig.mode == 2'>
						<view class="stars">
							<block v-for="(item,index2) in score" :key='index2'>
								<text @click="staring(index2,index1)" v-if='index2<comments[index1].star' class="iconfont icon-xingxing thmeColor" :style="{'--color': color}"></text>
								<text @click="staring(index2,index1)" v-else class="iconfont icon-xingxing gray"></text>
							</block>
						</view>
						<text class="thmeInfo">{{score[comments[index1].star-1]}}</text>
					</view>
				</view>
				<!-- 标签 -->
				<view class="tags-box flex-box" v-if='CommentConfig && CommentConfig.label'>
					<view class="tag_ flex-box align-center" @click="tagCheck(i_,index1,tt.id)" :class="{
						active: comments[index1].label_temp[i_]
					}" v-for='(tt,i_) in CommentConfig.label' :key='i_' :style="{'--color': color}">
						<text>{{ tt.title }}</text>
						<view class="img-box">
							<text class="iconfont icon-Fil2l1"></text>
							<image :src="staticUrl+'/images/jh_up/icon-2003.png'" class="icon-face"></image>
						</view>
					</view>
				</view>
				<!-- 评论框 、上传照片-->
				<view class="comBox">
					<textarea v-model="comments[index1].comment_word" class="radius" placeholder-class="thmeInfo" :placeholder="CommentConfig.defaultText?CommentConfig.defaultText:'写下你的评价, 你的评价可以帮助到其他买家哦~'" />
					<view class="imagesList flex-box">
						<view v-if='comments[index1].imgEn' class="chooseBox" @click="selectImage(index1)">
							<image :src="staticUrl+'/images/jh_up/icon-2004.png'" class="icon"></image>
							<view>上传照片</view>
						</view>
						<view class="img-box" v-if='comments[index1].comment_pic1 && comments[index1].comment_pic1.length>0' v-for="(item,index3) in comments[index1].comment_pic1" :key="index3">
							<text :style="{'--color': color}" class="icon-close-f iconfont delImg thmeColor" @click="del(index1,index3)"></text>
							<image class="upImg" :src="item" mode="aspectFill"></image>
						</view>
					</view>
					
				</view>
				
				
				
				<view class="flex-box flex-between see-box">
					<view class="flex-box align-center" @click="anonymous(index1)">
						<!-- <template v-if='comments[index1].anonymous == 0'>
							<text class="iconfont icon-yanjing1"></text>
							<text class="icon-yanjing1-txt">公开</text>
						</template>
						<template  v-if='comments[index1].anonymous == 1'>
							<text class="iconfont icon-Close"></text>
							<text class="icon-Close-txt">匿名</text>
						</template> -->
						<text class="check-box flex-box flex-center align-center">
							<text v-if='comments[index1].anonymous == 1' class="iconfont icon-xuanzhong thmeColor" :style="{'--color': color}"></text>
						</text>
						<text>是否匿名</text>
					</view>
					<view class="see-txt">
						用户昵称/头像其他买家{{comments[index1].anonymous == 1?'不':''}}可见
					</view>
				</view>
				
			</view>

			<!-- 其他评价 -->
			<view class="other-star" v-if='CommentConfig && CommentConfig.service'>
				<view class="title">其他评价</view>
				<view class="flex-box align-center starBox" v-for="(itm,ii) in CommentConfig.service" :key='ii'>
					<text class="Txt">{{ itm.title }}</text>
					<view class="stars">
						<block v-for="(item,index2) in score" :key='index2'>
							<text @click="otherStar(ii,index2,1)" v-if='index2<itm.num' class="iconfont icon-xingxing thmeColor" :style="{'--color': color}"></text>
							<text @click="otherStar(ii,index2,2)" v-else class="iconfont icon-xingxing gray"></text>
						</block>
					</view>
					<text class="thmeInfo">{{itm.num}}分</text>
				</view>
			</view>

			<view class="myBtn thmeBg radius" :style="{'--color': color}" @click="submit">
				<text>提交</text>
			</view>
		</view>
		<view v-else class="DiLine">
			{{ errMsg }}
		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				vid: uni.getStorageSync('vid'),
				showloading:true,
				staticUrl: this.staticUrl,
				selectImages:false,
				imgs:[],
				currIndex:4,
				score:[
					'很差',
					'一般',
					'比较满意',
					'非常满意',
					'无可挑剔',
				],
				loadingNow:false,
				pageData: '',
				comments: [],
				imgLength: 9, // 图片上限
				
				
				goodsName: uni.getStorageSync('startUp').nameDefinition.goodsName,
				CommentConfig:'',
				errMsg:'',
				// comments: [{
				// 	goods_name: '',
				// 	goods_id: '',
				// 	star: 1,
				// 	comment_word: "",
				// 	comment_pic1: [], // 临时路径
				// 	comment_pic: [], // 临时路径
				// 	imgs:[] ,// 最后要上传的图片
				// 	imgEn: true,// 当前条是否可以继续上传
				// 	anonymous:0 //是否匿名
				// }],
				// pageData:{
				// 	goodsData:[
				// 		{
				// 			goods_img:'Uploads/Member_img201611/7433/6032/202101/1609925083665.jpg',goods_name:'商品名称',price:'9.9',operation_text:"红色",goods_num:'22'
							
				// 		}
				// 	]
				// }
				
			}
		},
		onLoad(e) {
			that = this;
			that.orderId = e.oid;
			that.getConfig()
			
		},
		onShareAppMessage(res) {
		    let shareData = uni.getStorageSync('shareData');
		    return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index',
				imageUrl: shareData.imageUrl
		    }
		},
		onShareTimeline(item) {
		   let shareData = uni.getStorageSync('shareData');
		   return {
				title: shareData.desc,
				query: {test:1},
				imageUrl: shareData.imageUrl
		   }
		},
		methods: {
			getConfig(){
				that.$http.get({
					url:'/singleSaleApi/getCommentConfig',
					data:{
						bid: uni.getStorageSync('bid')
					}
				}).then(res=>{
					if(res.code == 100 && res.data){
						if(res.data.service){
							res.data.service.forEach(item=>{
								item.num = 1
							})
						}
						that.CommentConfig = res.data
					}
					that.getDetail()
				})
			},
			otherStar(index,score,type){
				if(type == 1){
					that.CommentConfig.service[index].num = score>1?score:1
				}else{
					that.CommentConfig.service[index].num = score+1
				}
				that.CommentConfig.service = [].concat(that.CommentConfig.service)
			},
			tagCheck(i,index1,id){
				that.comments[index1].label_temp[i] = that.comments[index1].label_temp[i]?'':id
				that.comments[index1].label_temp = [].concat(that.comments[index1].label_temp)
				that.comments = [].concat(that.comments)
				console.log(that.comments)
			},
			async comment(){
				uni.showLoading({
					title: '提交中···'
				})
				// 上传图片
				for(let item1 of that.comments){
					item1.label = []
					item1.label_temp.forEach(lab=>{
						if(lab){
							item1.label.push(lab)
						}
					})
					if(item1.comment_pic1.length > 0){
						for(let item of item1.comment_pic1){
							await that.$common.uploadFile('/zzjApp/uploade?bid='+uni.getStorageSync('bid'),item,1).then(res2=>{
								var data = res2;
								if(typeof res2 == 'string'){
									data = JSON.parse(data)
								}
								if(data.errcode == 100){
									var imgItem = data.url;
									imgItem = imgItem.substring(22,imgItem.length);
									item1.imgs.push(imgItem);
								}else{
									uni.showToast({
										icon: 'none',
										title: data.msg+'!',
										duration: 2000
									})
								}
							})
						}
					}
				}
				for(let i in that.comments){
					that.comments[i].label = that.comments[i].label.join(',')
					if(that.comments[i].imgs){
						that.comments[i].comment_pic = that.comments[i].imgs.join(',')
					}
				}
				var jsonStr = JSON.stringify(that.comments);
				let service = ''
				if(that.CommentConfig && that.CommentConfig.service){
					service = JSON.stringify(that.CommentConfig.service)
				}
				that.$http.post({
					url:'/singleSaleApi/comment',
					data:{
						order_code: that.pageData.order_code,
						comment: jsonStr, // 数组
						service: service // JSON数组  不能为空  [{"id":1,"num":5},{"id":1,"num":5},{"id":1,"num":5},{"id":1,"num":5}]
					}
				}).then(res=>{
					if(res.errcode != 100) return that.$Toast(res.msg)
					uni.navigateTo({
						url:'/orderPage/order/receiptSuccess?oid=' + that.pageData.order_id + '&btnType=1'
					})
				})
			},
			staring(star_num,index1){
				that.comments[index1].star = star_num+1;
			},
			getDetail(){
				/**
				 * 单商品特价订单详情
				 * **/
				 that.$http.post({
				 	url: '/zzj_singleSaleApi/orderSingleDetails',
				 	data: {
				 		order_id: that.orderId,
				 		v_id: that.vid,
						bid: uni.getStorageSync('bid')
				 	}
				 }).then(res => {
					if(res.errcode == 100){
						that.pageData = res.data;
						let lab = []
						if(that.CommentConfig && that.CommentConfig.label){
							that.CommentConfig.label.forEach(item=>{
								lab.push('')
						 	})
						}
						if(that.pageData.goodsData){
							for(let i in that.pageData.goodsData){
								lab = [].concat(lab)
								var obj={
									goods_name: that.pageData.goodsData[i].goods_name+that.pageData.goodsData[i].specs_bind_text,
									goods_id: that.pageData.goodsData[i].goods_id,
									star: 5,
									comment_word: "",
									comment_pic1: [], // 临时路径（未上传）
									comment_pic: [], // 上传后的路径
									imgs:[] ,// 最后要上传的图片
									imgEn: true,// 当前条是否可以继续上传
									anonymous:0 ,//是否匿名
									label_temp: lab, // 标签
									label: '', // 标签
								}
								that.comments.push(obj)
							}
						}else{
						 	let arry = []
						 	that.pageData.price = that.pageData.goodsprice
						 	arry.push(that.pageData)
						 	that.pageData.goodsData = arry
						 	var obj={
						 		goods_name: that.pageData.goods_name+that.pageData.specs_bind_text,
						 		goods_id: that.pageData.goods_id,
						 		star: 5,
						 		comment_word: "",
						 		comment_pic1: [], // 临时路径（未上传）
						 		comment_pic: [], // 上传后的路径
						 		imgs:[] ,// 最后要上传的图片
						 		imgEn: true,// 当前条是否可以继续上传
						 		anonymous:0 ,//是否匿名
						 		label_temp: lab, // 标签
						 		label: '', // 标签
						 	}
						 	that.comments.push(obj)
						} 
						console.log(that.comments)
					}else{
						that.errMsg = '数据获取失败！'
					}
				 	that.showloading = false;
				})
			},
			del(index1,index3){
				// 删除图片
				this.$delete(this.comments[index1].comment_pic1,index3);
				this.$delete(this.comments[index1].imgs,index3);
				var len = this.comments[index1].comment_pic1.length;
				if(len < this.imgLength){
					this.comments[index1].imgEn = true 
				}
				if(len < 1){
					this.selectImages = false;
				}
			},
			submit(){
				for(let i in that.comments){
					if(that.comments[i].comment_word == ''){
						uni.showToast({
							title:'请补充评语~',icon:'none'
						})
						return
					}
				}
				that.comment();
			},
			anonymous(index){// 匿名
				that.comments[index].anonymous = that.comments[index].anonymous==0?1:0
			},
			
			selectImage(index){//选择图片
				uni.chooseImage({
					count: that.imgLength,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'],
					success: (res) => {
						that.selectImages = true;
						that.loadingNow = true; // 图片正在上传
						if(that.comments[index].comment_pic1.length >= that.imgLength){
							uni.showToast({
								title: '最多可上传'+that.imgLength+'张照片哦~',
								icon:'none'
							});
							return
						}
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							if(that.comments[index].comment_pic1.length < that.imgLength){
								that.comments[index].comment_pic1.push(res.tempFilePaths[i])
							}else{
								that.comments[index].imgEn = false;
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		overflow-y: auto;
		background-color: #F5F5F5;
		padding: 20rpx;
		.similar-box{
			margin-top: 30rpx;
			>text{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			.img-box{
				.iconfont{
					font-size: 48rpx;
					color: #EEEEEE;
				}
				position: relative;
				.icon-face{
					position: absolute;
					width: 24rpx;
					height: 24rpx;
					top: 12rpx;
					left: 50%;
					margin-left: -12rpx;
				}
			}
			.face-box{
				justify-content: flex-end;
				>view{
					margin-left: 30rpx;
					text-align: center;
					margin-bottom: -10rpx;
					.txt{
						margin: -10rpx auto 0;
						font-size: 32rpx;
						transform: scale(0.5);
						color: #CCCCCC;
						&.show{
							color: #333333;
						}
					}
				}
			}
		}
		
		.tags-box{
			flex-wrap: wrap;
			.tag_{
				border: 1px solid #EEEEEE;
				height: 42rpx;
				margin-right: 24rpx;
				padding: 0 14rpx;
				border-radius: 40rpx;
				margin-top: 24rpx;
				>text{
					font-size: 26rpx;
					margin-right: 8rpx;
					color: #999999;
				}
				.img-box{
					margin-top: 2rpx;
					.iconfont{
						font-size: 30rpx;
						color: #EEEEEE;
					}
					position: relative;
					.icon-face{
						position: absolute;
						width: 14rpx;
						height: 14rpx;
						top: 8rpx;
						left: 6rpx;
					}
				}
				&.active{
					border: 1px solid var(--color);
					>text{
						color: var(--color);
					}
					.img-box{
						.iconfont{
							color: var(--color);
						}
					}
				}
			}
		}
	
		.commetItem{
			margin-bottom: 40rpx;
			border-radius: 16rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			.goodsBox{
				.goodsImg{
					width: 116rpx;
					height: 116rpx;
					margin-right: 20rpx;
				}
				.specsBox{
					margin-top: 6rpx;
					.goods_num{
						color: #999999;
					}
				}
				.myPrice{
					color:$uni-color-price;
					font-size: 30rpx
				}
			}
			.comBox{
				margin-top: 30rpx;
				textarea{font-size: 24rpx;width: 100%;height: 150rpx;background-color: #F9F9F9;padding: 20rpx;box-sizing: border-box;}
				.imagesList{
					padding: 20rpx 0 0 0;
					flex-wrap: wrap;
					margin-right: -20rpx;
					margin-bottom: -20rpx;
					.chooseBox{
						width: 122rpx;
						height: 122rpx;
						position: relative;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						background-color: #F5F5F5;
						border-radius: 8rpx;
						text-align: center;
						padding-top: 20rpx;
						view{
							color: #999999;
							font-size: 22rpx;
							margin-top: 10rpx;
						}
						.icon{
							width: 46rpx;
							height: 36rpx;
						}
					}
					.img-box{
						width: 122rpx;
						height: 122rpx;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						position: relative;
						.upImg{
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
						.delImg{
							position: absolute;
							z-index: 2;
							top: -6rpx;
							right: -6rpx;
							border-radius: 50%;
							font-size: 24rpx;
							width: 24rpx;
							height: 24rpx;
							background-color: #FFFFFF;
						}
					}
				} 
				
			}
		}
	
		.other-star{
			margin-top: 10rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			.starBox{
				margin-top: 20rpx;
			}
		}
		.starBox{
			.Txt{
				font-size: 28rpx;
				color: #333333;
				padding-right: 36rpx;
			}
			.stars{
				position: relative;
				top: 2rpx;
				.iconfont{
					padding: 0 4rpx;
					font-size: 34rpx;
				}
				.gray{
					color: #EEEEEE!important;
				}
			}
			.thmeInfo{
				color: #666666;
				margin-left: 20rpx;
			}
	}
		// 匿名
		.see-box{
			margin-top: 20rpx;
			// .iconfont{
			// 	font-size: 36rpx;
			// 	padding-right: 10rpx;
			// }
			// .icon-yanjing1,.icon-yanjing1-txt{
			// 	color: $uni-color-star;
			// }
			// .icon-Close,.icon-Close-txt{
			// 	color: #999999;
			// }
			// .see-txt{
			// 	color: #333;
			// }
			.check-box{
				width: 24rpx;
				height: 24rpx;
				border-radius: 4rpx;
				border: 2rpx solid #999999;
				margin-right: 10rpx;
				.iconfont{
					font-size: 24rpx;
					font-weight: bold;
				}
			}
			text{
				font-size: 28rpx;
			}
		}
	
		.myBtn{
			text-align: center;
			border-radius: 88rpx;
			width: 480rpx;
			margin: 60rpx auto 0;
			text{
				font-size: 28rpx;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				color: white;
			}
		}
	}
</style>
